<template>
  <div id="container">
    <div id="top">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="grid-content bg-purple">
            <el-carousel indicator-position="none" class="swiper" @change="swiper_index">
              <el-carousel-item v-for="item in 5" :key="item">
                <h3>{{ item }}</h3>
              </el-carousel-item>
            </el-carousel>
            <div class="dots">
              <ul>
                <li>
                  <img
                    src="../../../static/images/社区主页/u921.png"
                    height="21"
                    width="10"
                    class="swiper-dot-show"
                  />
                </li>
                <li>
                  <img src="../../../static/images/社区主页/u922.png" height="17" width="8" />
                </li>
                <li>
                  <img src="../../../static/images/社区主页/u922.png" height="17" width="8" />
                </li>
                <li>
                  <img src="../../../static/images/社区主页/u922.png" height="17" width="8" />
                </li>
                <li>
                  <img src="../../../static/images/社区主页/u922.png" height="17" width="8" />
                </li>
                <li>
                  <img src="../../../static/images/社区主页/u922.png" height="17" width="8" />
                </li>
              </ul>
              <!--                        <img src="../../assets/主页/images/社区主页/u922.png" height="21" width="10"/>-->
              <!--                        <img src="../../assets/主页/images/社区主页/u922.png" height="17" width="8"/>-->
              <!--                        <img src="../../assets/主页/images/社区主页/u922.png" height="17" width="8"/>-->
              <!--                        <img src="../../assets/主页/images/社区主页/u922.png" height="17" width="8"/>-->
              <!--                        <img src="../../assets/主页/images/社区主页/u922.png" height="17" width="8"/>-->
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="grid-content">
            <el-row :gutter="10" class="el-row-1">
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                  <div class="article"></div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                  <div class="article"></div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="10" class="el-row-1">
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                  <div class="article"></div>
                </div>
              </el-col>
              <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                <div class="grid-content bg-purple-light">
                  <div class="article"></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <articleA :mytest="sur" />
    <!-- <div class="page">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="grid-content bg-purple">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout=" prev, pager, next, jumper"
                :total="400"
              ></el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <page></page>
    <moreA/>
  </div>
</template>
<script>

  export default {

  data() {
    return {
      mytest:'1222',
      sur:{
        title:'最新文章1',
        mytest:'1222',
      },

      currentPage1:   5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      swiper_image_show: "../../assets/主页/images/社区主页/u921.png",
      swiper_image_hidden: "u922.png"
    };
  },
    created(){
    let that = this
      console.log(that.mytest)
    },
  methods: {
    handleClick() {
      alert("button click");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 当前轮播图索引
    swiper_index(index) {
      console.log(index);
      let get = index + 1;
      let move = get * 12 + "px";
      let doc = document.getElementsByClassName("swiper-dot-show")[0];
      doc.style.left = move;
    },
    dots_index() {
      console.log("233");
    }
  }
};
</script>

<style lang="scss" scoped>
#top,
#bottom {
  margin: 0 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /*background: #d3dce6;*/
}

.bg-purple-light {
  background: #5ff1cc;
  /*background: #d3dce6;*/
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  position: relative;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.article {
  height: 130px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 8px ;
}
.el-row-1 {
  margin-top: 25px;
}
.swiper {
  margin-top: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
}

.dots {
  ul {
    display: flex;
    align-items: center;
    position: relative;
  }
  img {
    margin: 2px;
  }
  position: absolute;
  left: calc(50% - 36px);
  display: flex;
  align-items: center;
}
.swiper-dot-show {
  position: relative;
  left: 12px;
}
.bottom-group {
  /*margin-bottom: 300px;*/
}
.bottom-group-1 {
  margin-top: 50px;
  position: relative;
  h1 {
    /*float: left;*/
    border-bottom: 1px solid #8f949a;
  }
  span {
    font-size: 13px;
    position: absolute;
    right: 0;
    top: 20px;
    cursor: pointer;
  }
  span:hover {
    color: #108de9;
  }
}
.bottom-group-list {
  padding: 20px 10px;
  h3 {
    margin-bottom: 30px;
    margin-top: 20px;
  }
  li {
    border-bottom: 1px solid #e0e0e0;
  }
}
.bottom-group-list-content {
  font-size: 14px;
  span {
    display: block;
    margin: 60px 0 10px;
    color: #bdbdbd;
    font-size: 12px;
  }
}
.block {
  text-align: center;
}
.page {
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 20px;
}
.border {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin: 20px 0;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.btn-p{
  height: 70px;
  width: 70px;
  border: 1px solid;
  border-radius: 50%;
  position: relative;;
  // z-index: 99;
  box-shadow: 0 2px 5px #616161;
  span{
    position: absolute;
    left: calc(50% - 27px);
    top:calc(50% - 5px)
  }
}
.entrance{
  position: fixed;
  bottom: 200px;
  right: 0;
}
.router{
  text-decoration: none;
  color:#108de9;
}
// .router

</style>

